<script setup lang="ts">
import {onMounted, reactive, ref, watch} from 'vue'
import MedicineAPI, {MedicineData} from "@/api/medicine";
import PopoverPage from "@/component/popover-page/PopoverPage.vue";
import {ElMessage} from "element-plus";
import {cloneDeep} from "lodash";

const model = defineModel<string>({default: ''})
const selectRow = ref<Partial<MedicineData>>()
const state = reactive({
  label: '',
  oldLabel: '',
  dataList: reactive<MedicineData[]>([]),
  current: 1,
  size: 20,
  total: 0,
  loading: false
})
const $emit = defineEmits(['callback'])

// onMounted(() => {
//   findDataList()
// })

watch(
    () => model.value,
    ()=>{
      findDataList()
    }
)

const findDataList = () => {
  if (!state.loading) {
    state.loading = true
    const params: Record<string, any> = {
      current: state.current,
      size: state.size
    }
    if (state.label && state.label !== '') {
      params['filterText'] = state.label
    }
    MedicineAPI.findSelectList(params)
        .then((data) => {
          state.dataList = data.records
          state.total = data.total
          if (state.dataList && state.dataList.length > 0) {
            if (!state.oldLabel || state.oldLabel === '') {
              const row = state.dataList.find((v) => v.code === model.value)
              if (row) {
                selectRow.value = row
                state.label = row.name
                state.oldLabel = cloneDeep(model.value)
              } else {
                state.label = model.value
                state.oldLabel = cloneDeep(model.value)
              }
            }
          }
          state.loading = false
        })
        .catch((err) => {
          console.error(err)
          ElMessage.error('获取分页数据异常')
          state.loading = false
        })
  }
}

const handleCallback = (row: MedicineData) => {
  model.value = row.code
  selectRow.value = row
  state.oldLabel = row.code
  state.label = row.name
  $emit('callback', row)
}
const handleShowEvent = () => {
  if (!selectRow.value || selectRow.value.name === state.label) {
    if (state.oldLabel && state.oldLabel !== '') {
      state.label = state.oldLabel
    }
    findDataList()
  } else {
    state.label = model.value
  }
}
const handleHideEvent = () => {
  if (selectRow.value && state.label === state.oldLabel) {
    state.label = selectRow.value.name as string
  }
}
const columnlist = reactive([
  { label: '代码', prop: 'code', minWidth: '80', align: 'center' },
  { label: '编码', prop: 'endcode', minWidth: '80', align: 'center' },
  { label: '药品名称', prop: 'name', minWidth: '150' },
  { label: '规格', prop: 'spec', minWidth: '80' },
  { label: '单位', prop: 'unit', minWidth: '80', align: 'center' },
  { label: '处方单位', prop: 'prescribeUnit', minWidth: '100' },
  { label: '医保国家编码', prop: 'nactionInsurCode', minWidth: '120' },
  { label: '数量', prop: 'qty', minWidth: '80', align: 'center' },
  { label: '单价', prop: 'price', minWidth: '80', align: 'center' }
])
</script>

<template>
  <PopoverPage
      v-model="state.label"
      v-model:page-index="state.current"
      v-model:page-size="state.size"
      :data="state.dataList"
      :column-list="columnlist"
      :total-count="state.total"
      :loading="state.loading"
      :before-show="handleShowEvent"
      :before-hide="handleHideEvent"
      @change="findDataList"
      @callback="handleCallback"
  ></PopoverPage>
</template>

<style scoped>

</style>